import ActionGroup from "./ActionGroup.vue"
import moment from 'moment'
/**
 * tooltip {boolean}  
 */
const columns = (showOperate) => {
  let arr = [
    // {
    //   type: 'selection',
    //   width: 55
    // },
    {
      label: 'Code Number',
      prop: 'codenumber',
      width: 120,
    },
    {
      label: 'Vehicle Name',
      prop: 'name',
      width: 120,
      tooltip: true,
    },
    {
      label: 'Classification',
      prop: 'classification',
      width: 120,
      tooltip: false,
    },
    {
      label: 'Organization',
      prop: 'unit',
      width: 160,
      tooltip: true,
    },
    {
      label: 'City',
      prop: 'cityName',
      width: 160,
      tooltip: true,
    },
    {
      label: 'AIBOX Camera',
      prop: 'aiboxcamera',
      width: 180,
      tooltip: true,
      formatter: (row, column, cellValue, index) => {
        return <el-tooltip content={row.aiboxcamera} effect="car" placement="right">
          <div>
            {
              row.aiboxcamera?.split(",").map(i => {
                return <div>{i}</div>
              })
            }
          </div>
        </el-tooltip>
      }
    },
    {
      label: 'Car Number',
      prop: 'carnumber',
      width: 120,
    },
    {
      label: 'Vehicle Model',
      prop: 'modelName',
      width: 120,
      tooltip: false,
    },
    {
      label: 'Passengers',
      prop: 'passagernumName',
      width: 120,
    },
    // {
    //   label: 'Retirement Period',
    //   prop: 'retirementperiod',
    //   width: 156,
    //   formatter: (row, column, cellValue, index) => {
    //     return row.retirementperiod ? moment(row.retirementperiod).format('yyyy-MM-DD') : '';
    //   }
    // },
    {
      label: 'GPS',
      prop: 'position',
      minWidth: 104,
      tooltip: true,
      formatter: (row, column, cellValue, index) => {
        return <el-tooltip content={row.lng + '，' + row.lat} effect="car" placement="right">
          <div>
            {
              (row.lng && row.lat) ? row.lng + '，' + row.lat : ''
            }
          </div>
        </el-tooltip>
      }
    },
    {
      label: 'State',
      prop: 'status',
      width: 80,
      tooltip: false,
      formatter: (row, column, cellValue, index) => {
        return <div>{
          row.status == 0 ? <div style={{ color: 'var(--mw-not-important-off-color)' }}>offline</div> : row.status == 1 ? <div style="color:#3A4EFC">online</div> : <div style="color: #FB393C">alarmed</div>
        }</div>
      }
    },
    {
      label: 'Creator',
      prop: 'createName',
      width: 100,
      tooltip: false
    }
  ];
  if (showOperate) {
    arr.push({
      label: "Operate",
      width: 300,
      render: ActionGroup
    })
  }
  return arr;
};
export default columns;